
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media screen and (max-width:400px) {
            *{
                margin: 0;
                padding: 0;
            }
            /* 搜索栏 */
            .search{
                width: 100%;
                height: 45px;
                background-color: rgb(244, 244, 244);
                position: fixed;
                top: 0px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid rgb(206, 206, 206);
            }

            .search img:nth-child(1){
                width: 16px;
                position: absolute;
                top: 13px;
                left: 18px;
            }

            .search input{
                width: 330px;
                height: 30px;
                box-sizing: border-box;
                border:1px solid rgb(206, 206, 206);
                text-indent: 30px;
                margin-left: 10px;
                border-radius: 5px;
                box-shadow: 1px 1px 1px rgb(219, 219, 219);
            }

            .search img:nth-child(3){
                width: 25px;
                height: 25px;
                position: absolute;
                top: 3px;
                right: 8px;
            }

            .search span{
                font-size: 14px;
                position: absolute;
                color: rgb(137, 190, 223);
                bottom: 0px;
                right: 6px;
            }
            /* 图片 */
            .img-big{
                width: 100%;
                height: 80px;
                background: url(https://oss.9ihub.com/test/xiecheng-focus.jpg) center / contain no-repeat;
                margin-top: 45px;
            }
            /* 内容区域 */
            .content{
                background-color: rgb(244, 244, 244);
            }

            .content::before{
                content: "";
                display: table;
            }

            /* 内容区域-景点 */
            .scenicSpot{
                width: 98%;
                height: 65px;
                margin: 7px auto 2px;
                border-radius: 5px;
                background-color: rgb(255, 255, 255);
                display: flex;
                align-items: center;
                justify-content: space-evenly
            }

            .scenicSpot>div{
                width: 55px;
                height: 55px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: 12px;
            }

            .scenicSpot .img-small{
                width: 36px;
                height: 36px;
                background: url(https://oss.9ihub.com/test/xiecheng-localnav_bg.png);
                background-size: cover;
            }
            /* 内容区域-酒店 */
            .hotel{
                width: 98%;
                margin: 2px auto;                
                color: white;
                text-align: center;
                line-height: 43px;
            }

            .hotel::after{
                content: "";
                clear: both;
                display: block;
            }

            .hotel>div::after{
                content: "";
                clear: both;
                display: block;
            }

            .hotel .big-box{
                width: 33%;
                height: 88px;
                background-image: linear-gradient(to right,rgb(250, 91, 86) 0%,rgb(250, 108, 84) 100%);
                box-sizing: border-box;
                float: left;
                position: relative;
            }

            .hotel .small-box{
                width: 33%;
                height: 43px;
                float: left;
                box-sizing: border-box;
                margin-bottom: 2px;
                margin-left: 1px;
                font-size: 16px;
            }

            .hotel .big-box img{
                width: 100%;
                position: absolute;
                bottom: 0px;
                left: 0px;
            }

            .border-top-left-radius{
                border-top-left-radius: 10px;
            }

            .border-top-right-radius{
                border-top-right-radius: 10px;
            }

            .border-bottom-left-radius{
                border-bottom-left-radius: 10px;
            }

            .border-bottom-right-radius{
                border-bottom-right-radius: 10px;
            }

            /* 内容区域-话费 */
            .mesh{
                width: 98%;
                margin: 2px auto;
                background-color: rgb(255, 255, 255);
                border-radius: 5px;
                display: flex;
                flex-wrap: wrap;
            }

            .mesh::before{
                content: "";
                display: table;
            }

            .mesh>div{
                width: 20%;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                margin-top: 9px;
                font-size: 14px;
            }

            .mesh .mesh-img{
                width: 40px;
                height: 40px;
                background: url(https://oss.9ihub.com/test/xiecheng-subnav-bg.png) top center / cover no-repeat;
            }
            /* 内容区域-活动头部 */
            .activity-top{
                width: 98%;
                height: 60px;
                border-top:1px solid rgb(197, 197, 195) ;
                margin: 5px auto;
                background-color: rgb(255, 255, 255);
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .activity-top div:nth-child(1){
                width: 75px;
                height: 20px;
                margin-left: 5px;
                background: url(https://oss.9ihub.com/test/xiecheng-hot.png) center / cover no-repeat;
            }

            .activity-top div:nth-child(2){
                width: 130px;
                height: 30px;
                border-radius: 20px;
                font-size: 16px;
                color: white;
                text-align: center;
                line-height: 30px;
                margin-right: 5px;
                background-image: linear-gradient(to right,rgb(248, 86, 116),rgb(249, 105, 181));
            }

            /* 内容区域-活动 */
            .activit{
                width: 98%;
                margin: 5px auto;
                display: flex;
                flex-wrap: wrap;
            }

            .activit>div{
                width: 49%;
                margin-bottom:7px;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
            }

            .activit>div:nth-child(2n-1){
                margin-right:7px;
            }

            .activit .activit-big-box{
                height: 140px;
            }

            .activit .activit-small-box{
                height: 70px;
            }
        }
    </style>
</head>
<body>

    <div class="search">
        <img src="../xiecheng-sprite.png" alt="">
        <input type="text" placeholder="搜索:目的地/酒店/景点/航班号">
        <img src="../xiecheng-sprit1e.png" alt="">
        <span>我 的</span>
    </div>

    <div class="img-big"></div>

    <div class="content">
        <div class="scenicSpot"></div>
        <div class="hotel"></div>
        <div class="mesh"></div>
        <div class="activity-top">
            <div></div>
            <div>获取更多福利 &gt;</div>
        </div>
        <div class="activit"></div>
    </div>

    <script>
        //渲染景点
        const scenicSpot = document.querySelector('.scenicSpot')
        for (let i = 0; i < 5; i++) {
            const div = document.createElement('div')
            div.innerHTML = `
                <div class="img-small"></div>
                <span>景点·玩乐</span>
            `
            scenicSpot.appendChild(div)
        }
        const imgSmallAll = document.querySelectorAll('.img-small')
        for (let i = 0; i < imgSmallAll.length; i++) {
            imgSmallAll[i].style.backgroundPositionY = `${-36*i}px`
        }
        //渲染酒店
        let color = [
            {
                color1:'rgb(250, 108, 84)',
                color2:'rgb(250, 116, 83)',
                color3:'rgb(251, 131, 81)',
                color4:'rgb(249, 148, 77)'
                
            },
            {
                color1:'rgb(76, 147, 236)',
                color2:'rgb(80, 163, 236)',
                color3:'rgb(81, 172, 237)',
                color4:'rgb(83, 186, 237)'
            },
            {
                color1:'rgb(58, 196, 166)',
                color2:'rgb(75, 201, 138)',
                color3:'rgb(91, 206, 115)',
                color4:'rgb(105, 211, 95)'
            }
        ]
        const hotel = document.querySelector('.hotel')            
        for (let i = 0; i < 3; i++) {
            const div = document.createElement('div')
            div.innerHTML = `
                <div class="big-box" style="background-image: linear-gradient(to right,${color[i].color1} 0%,${color[i].color2} 100%)">
                    <div>海外酒店</div>
                    <img src="https://oss.9ihub.com/test/xiecheng-hotel.png" alt="">
                </div>
                <div class="small-box" style="background-image: linear-gradient(to right,${color[i].color2} 0%,${color[i].color3} 100%)">海外酒店</div>
                <div class="small-box" style="background-image: linear-gradient(to right,${color[i].color3} 0%,${color[i].color4} 100%)">海外酒店</div>
                <div class="small-box" style="background-image: linear-gradient(to right,${color[i].color2} 0%,${color[i].color3} 100%)">特价酒店</div>
                <div class="small-box" style="background-image: linear-gradient(to right,${color[i].color3} 0%,${color[i].color4} 100%)">特价酒店</div>
            `
            hotel.appendChild(div)
        }

        const radiusBigBox = document.querySelectorAll('.big-box')
        radiusBigBox[0].classList.add('border-top-left-radius')
        radiusBigBox[radiusBigBox.length-1].classList.add('border-bottom-left-radius')

        const radiusSmallBox = document.querySelectorAll('.small-box')
        radiusSmallBox[1].classList.add('border-top-right-radius')
        radiusSmallBox[radiusSmallBox.length-1].classList.add('border-bottom-right-radius')
        //渲染电话
        const mesh = document.querySelector('.mesh')            
        for (let i = 0; i < 10; i++) {
            const div = document.createElement('div')
            div.innerHTML = `
                <div class="mesh-img"></div>
                <span>电话费</span>
            `
            mesh.appendChild(div)
        }
        //渲染活动
        const activit = document.querySelector('.activit')            
        for (let i = 0; i < 6; i++) {
            const div = document.createElement('div')
            if (i < 2) {
                div.classList.add('activit-big-box')
            }else{
                div.classList.add('activit-small-box')
            }
            div.style.backgroundImage = `url(https://oss.9ihub.com/test/xiecheng-pic${i+1}.jpg)`
            activit.appendChild(div)
        }


    </script>
</body>
</html>